<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">

		<!-- !Always force latest IE rendering engine (even in intranet) & Chrome Frame

		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>08_JavaScript_dom</title>
		<meta name="description" content="">
		<meta name="author" content="chenyong">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">
 
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		
		<style type="text/css">
			
			
			body{
				margin:50px;
			}
			
			div{
				font-size:12px;
			}
			
			div.box{
				margin-top:30px;
			}
		
			
		</style>
		
		<script type="text/javascript">
		
		var cldWindow;
		
		function fn1(){
			document.getElementById('showpwd').innerHTML = document.getElementById('pwd').value;
		}
		
		function fn2(){
			var names = document.getElementsByName('iname');
			var str = '';
			for(var i=0;i<names.length;i++){
				str = str + names[i].value+'|';
			}
			document.getElementById('showname').innerHTML = str;
			
		}
		
		function fn3(){
			var tags = document.getElementsByTagName('input');
			var str = '';
			for(var i=0;i<tags.length;i++)
			{
				str = str + tags[i].value + '|';
			}
			document.getElementById('showinput').innerHTML = str;
		}
		
		</script>
	</head>
	
	<body>
		
			
		<h3>08_JavaScript_dom</h3>
		
		<div class="box" >
			<p><b>ID获取节点</b></p>
			<p>通过document.getELementById()获取节点</p>
			<button onclick="fn1()" style="cursor: pointer">获取Password</button>
			<p id="showpwd"> </p>
		</div>
		<p>Password:<input type="password" id="pwd" /></p>
		
		
		<div class="box" >
			<p><b>name获取节点</b></p>
			<p>通过document.getELementsByName()获取name属性相同的所有节点</p>
			<button onclick="fn2()" style="cursor: pointer">获取name</button>
			<p id="showname"> </p>
		</div>
		<p>name1:<input type="text" name="iname"/></p>
		<p>name2:<input type="text" name="iname"/></p>
		<p>name3:<input type="text" name="iname"/></p>
		<p>name4:<input type="text" name="iname"/></p>
		<p>name5:<input type="text" name="iname"/></p>
		<p>name6:<input type="text" name="iname"/></p>
		
		
		<div class="box" >
			<p><b>标签类型获取节点</b></p>
			<p>通过document.getELementsByTagName()获取tagname相同的所有节点</p>
			<button onclick="fn3()" style="cursor: pointer">获取input</button>
			<pre id="showinput"> </pre>
		</div>
	</body>
	
</html>
